<template>
    <div class="a">
        操作地址<input type="text" placeholder="请输入操作地址">
        操作人<input type="text" placeholder="请输入操作人">
        <!-- 类型 -->
        类型 <el-select placeholder="操作类型" style="width: 200px; height: 30px; margin-left: 5px;">
            <el-option label="新增" value="1"></el-option>
            <el-option label="修改" value="2"></el-option>
            <el-option label="删除" value="3"></el-option>
        </el-select>
        状态<el-select placeholder="操作状态" style="width: 200px; height: 30px; margin-left: 5px;">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
        </el-select>
        操作时间<el-date-picker
            v-model="value"
            type="date"
            placeholder="选择日期"
            style="width: 200px; height: 30px; margin-left: 5px;">
        </el-date-picker>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary">重置</el-button>
    </div>
    <div class="b">
        <!-- 新增，展开/折叠按钮 -->
        <el-button type="danger" plain @click="toDelete">删除</el-button>
        <el-button type="info" plain @click="toDeleteAll">清空</el-button>
    </div>
    <div class="c">
        <el-table border stripe :data="data">
            <el-table-column type="selection" width="55" />
            <el-table-column v-for="col in columns"
                :prop="col.id"
                :key="col.id"
                :label="col.label"
                :width="col.width">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" plain @click="handleClick(scope.row)">详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        
    </div>
</template>

<script setup>
import { ref } from 'vue'
let columns = ref([
    { id: 'oper_id', label: '日志编号'},
    { id: 'title', label: '模块标题'},
    { id: 'business_type', label: '操作类型'},
    { id: 'oper_name', label: '操作人员'},
    { id: 'oper_location', label: '操作地点'},
    { id: 'status', label: '操作状态'},
    { id: 'oper_time', label: '操作时间' },
])
// 表格添加数据
let data = ref([
    { oper_id: '1', title: '用户管理', business_type: '新增', oper_name: 'admin', oper_location: '127.0.0.1', status: '正常', oper_time: '2021-01-01 00:00:00' },
    { oper_id: '2', title: '用户管理', business_type: '修改', oper_name: 'admin', oper_location: '127.0.0.1', status: '正常', oper_time:'2021-01-01 00:00:00'}
])
</script>

<style scoped>
input {
    width: 200px;
    margin: 0 10px;
    height: 30px;
    border: 1px solid #ccc;
}

.a {
    margin-left: 20px;
    margin-top: 10px;
    font-size: 14px;
    /* 加粗 */
    
}

.a input {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
}

.a button {
    margin-left: 20px;
}

.b {
    margin-left: 20px;
    margin-top: 20px;
}
.c {
    margin-left: 20px;
    margin-top: 20px;
}
</style>